<form class="layui-form" lay-filter="data-form" onsubmit="return false;">
    <input type="hidden" name="id" value="#(bean.id??)">
    <div class="layui-card">
        <div class="layui-card-body">
            <ul class="layui-timeline">
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis layui-icon-circle"></i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">基本信息</h3>
                        <p>
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label required">归属部门</label>
                                <div class="layui-input-inline">
                                    <div id="parent" data-id="0" value="#(bean.deptId??)"></div>
                                </div>
                                <label class="layui-form-label required">状态</label>
                                <div class="layui-input-inline">
                                    <input type="radio" name="status" value="ON" title="启用" #if(bean.status?? == 'ON' || bean.status?? == null) checked #end>
                                    <input type="radio" name="status" value="OFF" title="禁用" #if(bean.status?? == 'OFF') checked #end>
                                </div>
                            </div>
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label#if(!bean.id??) required#end">登录账号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="account" value="#(bean.account??)" lay-verify="required" autocomplete="off" placeholder="用于登录" class="layui-input"#if(bean.id??) disabled#end>
                                </div>
                                #if(!bean.id)
                                <label class="layui-form-label required">登录密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" name="password" value="#(bean.password??)" lay-verify="required" autocomplete="off" placeholder="用于登录" class="layui-input">
                                </div>
                                #end
                            </div>
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label required">用户昵称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="nickname" value="#(bean.nickname??)" lay-verify="required" autocomplete="off" placeholder="用于显示" class="layui-input">
                                </div>
                                <label class="layui-form-label required">用户性别</label>
                                <div class="layui-input-inline">
                                    <select name="gender" lay-verify="required">
                                        <option value="">-- 请选择 --</option>
                                    #DICTS(type="user_gender")
                                    #for(item : dicts)
                                        <option value="#(item.value)"#if(item.value == bean.gender??) selected#end>#(item.label)</option>
                                    #end
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">手机号码</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="phone" value="#(bean.phone??)" autocomplete="off" placeholder="请输入手机号码" class="layui-input">
                                </div>
                                <label class="layui-form-label">电子邮箱</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="email" value="#(bean.email??)" autocomplete="off" placeholder="请输入电子邮箱" class="layui-input">
                                </div>
                            </div>
                        </p>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis layui-icon-circle"></i>
                    <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">其它信息</h3>
                        <p>
                            <div class="layui-form-item layui-block">
                                <label class="layui-form-label">备注</label>
                                <div class="layui-input-block">
                                    <textarea name="remark" style="min-height: 20px;" autocomplete="off" placeholder="请输入备注内容" class="layui-textarea">#(bean.remark??)</textarea>
                                </div>
                            </div>
                        </p>
                    </div>
                </li>
                <li class="layui-timeline-item#if(bean.id??) layui-hide#end">
                    <i class="layui-icon layui-timeline-axis layui-icon-circle"></i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">角色信息</h3>
                        <p>
                            <div class="layui-form-item layui-block">
                                <input type="hidden" name="roleIds">
                                <div class="layui-input-block">
                                	<div id="beans-transfer"></div>
                                </div>
                            </div>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-form-item" style="display: none;">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="data-save" id="data-save" onclick="return window.checkData();">
                <i class="layui-icon layui-icon-ok"></i> 提交
            </button>
        </div>
    </div>
</form>
#include("/admin/_common/foot.html")
<script type="text/javascript">
layui.use(['jquery', 'form', 'xmSelect', 'transfer'], function() {
    var $ = layui.jquery;
    var form = layui.form;
    var transfer = layui.transfer;
    var xmSelect = layui.xmSelect;

    /*
     * 初始化部门树
     */
    window.initDeptTree = () => {
        xmSelect.render({
            el: "#parent",// 树绑定的元素ID
            name: 'deptId',
            filterable: false,// 是否开启搜索
            radio: true,// 单选模式
            tree: {
                show: true,
                showFolderIcon: true,//是否展示三角图标
                showLine: false,// 是否显示虚线
                indent: 20,// 树状虚线距离
                expandedKeys: true,// 展开所有节点
                strict: false,// 勾选父类是否全选下级
                clickExpand: false,// 点击节点是否展开
                clickCheck: true,// 点击节点是否选中
            },
            prop: { // 自定义属性
                value: 'id', // value的值为data中的id值
                name: 'name',
                selected: 'selected',
                disabled: 'disabled',
                children: 'children',
            },
            toolbar: {show: true,list: ['CLEAR']},// 开启工具条
            initValue: ["#(bean.deptId??)"],// 初始化选择
            clickClose: true,//是否点击选项后自动关闭下拉框
            data: window.getDeptTreeData()
        });
    }

    /*
     * 从后台获取部门树数据
     */
    window.getDeptTreeData = () => {
        var data = [];
        $.ajax({
            url: "#CTX()/admin/system/dept/tree",    //后台数据请求地址
            async: false,
            success: function(result){
                data = result;
            }
        });

        return data;
    };

    /*
     * 渲染角色
     */
    window.renderTransfer = () => {
    	transfer.render({
    	    elem: '#beans-transfer',
    	    id: 'beans-transfer-1',
    	    data: window.getRoles(),
    	    title: ['备选角色', '已选角色'],
    	    value: {},
    	    parseData: (res) => {
    	    	return {
    	            "value": res.id, // 数据值
    	            "title": res.name, // 数据标题
    	            "disabled": res.status != 'ON',  // 是否禁用
    	            "checked": res.checked // 是否选中
   	            }
    	    }
   	    });
    };
    
    window.getRoles = () => {
    	var data = [];
        $.ajax({
            url: "#CTX()/admin/system/role/queryList",    //后台数据请求地址
            type: "post",
            data: {"status": "ON"},
            async: false,
            success: function(result){
            	data = result;
            }
        });
        return data;
    };
    
    window.checkRoles = () => {
        var ids = [];
        var result = transfer.getData('beans-transfer-1');
        for(var i = 0; i < result.length; i++){
        	ids.push(result[i].value);
        }
        $("[name='roleIds']").val(ids.join());
    };
    
    window.checkData = () => {
    	var formData = form.val("data-form");
    	if (!formData.deptId) {
    		layer.msg("必须选择归属部门", {icon: 5});
    		return false;
    	}
    	
    	window.checkRoles();
    	return true;
    };
    
    /*
     * 页面加载完成时加载穿梭框
     */
    $(document).ready(() => {
        window.initDeptTree();
    	window.renderTransfer();
    });
});
</script>
